<template>
  <div id="main">
    <div id="" class="card">
      <!--查询条件-->
      <el-form :inline="true" :model="queryVo" class="demo-form-inline center" style="inline-height:50px; text-align: center; margin: auto">
        <el-form-item label="仓库名:">
          <el-input v-model="queryVo.stockName" placeholder="请输入仓库名"></el-input>
        </el-form-item>
        <el-form-item label="商品名称:">
          <el-input clearable v-model="queryVo.productName" placeholder="请输入商品名称"></el-input>
        </el-form-item><el-form-item label="供应商名称:">
        <el-input clearable v-model="queryVo.supplierName" placeholder="请输入供应商名称"></el-input>
      </el-form-item>
        <el-form-tiem>
          <el-button type="primary" icon="el-icon-search"  @click="query" >搜索</el-button>
        </el-form-tiem>
      </el-form>
      <!--数据表格-->
      <el-table
          :data="stock"
          style="width: 100%">
        <el-table-column
            prop="id"
            label="编号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="imgUrl"
            label="图片"
            width="230">
          <template slot-scope="scope">
            <el-image
                style="width: 60px; height: 60px"
                :src="scope.row.imgUrl"
                :fit="fit"></el-image>
          </template>
        </el-table-column>
        <el-table-column
            prop="productName"
            label="商品名称"
            width="230">
        </el-table-column>
        <el-table-column
            prop="stockId"
            label="存放仓库"
            width="230">
          <template slot-scope="scope">
                <span v-for="(item,index) in gatherType" :key="index">
                  <span v-if="scope.row.stockId==item.id">{{item.gatherType}}</span>
                </span>
          </template>
        </el-table-column>
        <el-table-column
            prop="supplierName"
            label="商品来源(供应商)"
            width="230">
        </el-table-column>
        <el-table-column
            prop="realAmount"
            label="当前库存数量(件)"
            width="180">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "QueryCell",
  data(){
    return{
      fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
      //表格数据
      stock:[],
      // 查询条件
      queryVo: {
        stockName: '',
        supplierName: '',
        productName:''
      },
      //每页行数
      pageSize: 5,
      //总页数
      total: 0,
      // 当前页
      currentPage: 1,
      //仓库类型
      gatherType: [],
    }
  },
  created() {
    this.query()
    this.selGather()
  },
  methods:{
//查询所有仓库类型
    async selGather(){
      const {data : res}=await this.$http.post
      (`/gatherType/list`)
      this.gatherType=res
      console.log(res)
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.query()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.query()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    async query(){
      console.log(this.queryVo)
      const {data: res} = await this.$http.post
      (`/stockDetails/list/${this.currentPage}/${this.pageSize}`, this.queryVo)
      this.stock = res.list
      this.total = res.total
    }
  }
}
</script>

<style scoped>
.card {
  box-sizing: border-box;
  padding: 20px;
  overflow-x: hidden;
  background-color: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  box-shadow: 0 0 12px #0000000d
}
.page{
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>